<template>
  <div class="filter">
    <t-drawer
      class="drawer"
      size="100%"
      :visible.sync="visible"
      :closeBtn="false"
      :footer="current !== 2 && userInfo.is_agent === 101"
      :close-on-overlay-click="false"
      :confirm-btn="null"
      :cancel-btn="null"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <p class="chevron-left">
            <icon-font name="chevron-left" size="18px" />
          </p>
          <h3>{{header}}</h3>
        </div>
      </template>
      <template #footer>
        <div v-if="current !== 3" class="flex align-center justify-end">
          <template v-if="current === 0">
            <t-popconfirm :visible="formVisible" theme="danger" placement="top-right" confirm-btn="驳回" @visible-change="onVisibleChange" @confirm="handleReject">
              <template #icon><p></p></template>
              <template #content>
                <div class="popconfirm-body" style="width: 320px">
                  <!--<h3 class="popconfirm-title">确认驳回？</h3>-->
                  <!--<p>删除后数据将不可恢复！是否确认删除？</p>-->
                  <t-form :data="formData" :rules="rules" ref="form" layout="vertical" label-align="top" @submit="onSubmit">
                    <t-form-item label="驳回说明" name="is_audit">
                      <t-textarea size="large" v-model="formData.audit_msg" placeholder="请输入备注"></t-textarea>
                    </t-form-item>
                  </t-form>
                </div>
              </template>
              <t-button variant="outline" theme="danger">驳回</t-button>
            </t-popconfirm>
            <t-button @click="current = 1">下一步</t-button>
          </template>
          <template v-if="current === 1">
            <t-button variant="outline" theme="primary" @click="current = 0">上一步</t-button>
            <t-popconfirm  theme="warning" placement="top-right" confirm-btn="确认" @confirm="handleAudit">
              <template #content>
                <div class="popconfirm-body">
                  <h3 class="popconfirm-title">是否确认审核通过并确认订单？</h3>
                  <!--<p>删除后数据将不可恢复！是否确认删除？</p>-->
                </div>
              </template>
              <t-button>审核通过并确认订单</t-button>
            </t-popconfirm>
          </template>
        </div>
      </template>

      <div v-if="userInfo.is_agent === 101" class="steps-wrap">
        <t-steps :defaultCurrent="current">
          <t-step-item title="审核资料" />
          <t-step-item title="产品发货" />
          <t-step-item title="完成" />
        </t-steps>
      </div>

      <!-- 基础信息 -->
      <base-info v-if="current === 0" :info="userInfo"></base-info>
      <!-- 订单信息 -->
      <order-info v-if="current === 1" :info="orderInfo"></order-info>
      <!-- 完成 -->
      <status-complete v-if="current === 2" @back="close"></status-complete>
    </t-drawer>
  </div>
</template>

<script>
import { IconFont, BrowseIcon } from "tdesign-icons-vue";
import {agentAuditApi, agentDetailsApi} from "@/api/agent";
import {agentOrderConfirmApi, agentOrderDetailsApi} from "@/api/order";
import BaseInfo from "@/pages/agent/approve/components/base-info.vue";
import OrderInfo from "@/pages/agent/approve/components/order-info.vue";
import StatusComplete from "@/pages/agent/approve/components/status-complete.vue";

export default {
  name: 'ApproveDetails',
  components: {StatusComplete, OrderInfo, BaseInfo, IconFont, BrowseIcon},
  data() {
    return {
      visible: false,
      header: '代理商申请详情',
      applyId: '', // 申请id
      orderId: '', // 订单id
      userInfo: {}, // 用户信息
      orderInfo: {}, // 订单信息
      current: 0,

      formVisible: false,
      formData: {
        is_audit: -1, // 审核（-1 驳回；1 通过）
        audit_msg: '', // 驳回原因
      },
      rules: {

      },
    }
  },
  methods: {
    // 审核通过
    handleAudit() {
      agentAuditApi(this.applyId, {is_audit: 1}).then(res=> {
        //this.getDetail()
        this.handleConfirmOrder()
      }).catch(err=> {
        console.log('err', err)
      })
    },
    handleConfirmOrder() {
      agentOrderConfirmApi(this.orderId, {is_order_affirm: 1}).then(res=> {
        this.$message.success('预审完成')
        this.current = 2
        this.$emit('refresh')
      }).catch(err=> {
        console.log('err', err)
      })
    },
    // 打开驳回表单
    onVisibleChange(val, context = {}) {
      // trigger 表示触发来源，可以根据触发来源自由控制 visible
      if (context && context.trigger !== 'confirm') {
        this.formVisible = val;
      }
    },
    // 驳回
    handleReject() {
      this.$refs.form.submit();
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        this.handleSubmit()
      } else {
        this.$message.warning(firstError);
      }
    },
    // 提交驳回
    handleSubmit() {
      agentAuditApi(this.applyId, this.formData).then(res=> {
        this.$message.success('提交成功')
        this.formVisible = false
        this.$emit('refresh')
        this.getDetail()
      }).catch(err=> {
        console.log('err', err)
      })
    },
    // 获取详情
    getDetail() {
      agentDetailsApi(this.applyId).then(res=> {
        this.userInfo = res.data
        this.userInfo.asset_certificate_data = res.data.asset_certificate_data ? res.data.asset_certificate_data.split(',') : []
        this.userInfo.club_card_data = res.data.club_card_data ?  res.data.club_card_data.split(',') : []
        this.userInfo.credit_report_data = res.data.credit_report_data ?  res.data.credit_report_data.split(',') : []
        this.userInfo.identity_card_data = res.data.identity_card_data ?  res.data.identity_card_data.split(',') : []
        this.userInfo.student_card_data = res.data.student_card_data ?  res.data.student_card_data.split(',') : []
      }).catch(err=> {
        console.log('err', err)
      })
      agentOrderDetailsApi(this.orderId).then(res=> {
        this.orderInfo = res.data
        this.orderInfo.address_mark_data = res.data.address_mark_data ? JSON.parse(res.data.address_mark_data) : {}
      }).catch(err=> {
        console.log('err', err)
      })
    },
    open(row) {
      this.current = 0
      this.applyId = row.id
      this.orderId = row.order_id
      this.userInfo = {}
      this.orderInfo = {}
      this.getDetail()
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.steps-wrap {
  position: sticky;
  top: 0;
  z-index: 99;
  background-color: rgba(240, 243, 246, 1);
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl)  var(--td-comp-paddingTB-xxl);
}

  /deep/ .detail-card {
    .t-card__body {
      padding-top: 0;
    }
    i {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: 4px;
      border-radius: var(--td-radius-circle);
      background: var(--td-success-color-5);
    }

    .inProgress {
      color: var(--td-success-color-5);
    }

    .success {
      color: var(--td-success-color-5);

      i {
        background: var(--td-success-color-5);
      }
    }

    .danger {
      color: var(--td-error-color-5);

      i {
        background: var(--td-error-color-5);
      }
    }

    .warning {
      color: var(--td-warning-color-5);

      i {
        background: var(--td-warning-color-5);
      }
    }

  }



  /deep/ .drawer {
    .t-drawer__header {
      border-bottom: none;
      background-color: rgba(240, 243, 246, 1);
    }
    .t-drawer__body {
      position: relative;
      scrollbar-width: thin;
      padding-top: 0;
      background-color: rgba(240, 243, 246, 1);
    }
    .t-drawer__footer {
      padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
    }
  }
</style>
